{% extends 'base.html' %}
{% block css-content %}
    <link rel="stylesheet" href="/static/jquery-confirm/jquery-confirm.min.css">
    <link href="/static/datatable/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
    <link href="/static/datatable/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
    <link href="/static/datatable/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
    <link href="/static/datatable/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="/static/css/bootstrap-select.css"> 
    <link rel="stylesheet" href="/static/css/jquery.orgchart.css">	
    <link href="/static/css/doublebox-bootstrap.css" rel="stylesheet"> 
	<style type="text/css"> 
		td.details-control {
		    background: url('/static/images/details_open.png') no-repeat center center; */
		    cursor: pointer;
		}
		tr.shown td.details-control {
		    background: url('/static/images/details_close.png') no-repeat center center;
		} 
		#compile-editor-add {
			width: 100%;
			height: 200px;
	   }	
		#compile-editor-modf {
			width: 100%;
			height: 200px;
	   }
          .modal-header{
            cursor:move;
          }		   
		#chart-container { text-align: left; }

	    .orgchart td.left, .orgchart td.right, .orgchart td.top { border-color: #aaa; }

	    .orgchart .middle-level .title { background-color: #006699; }
	    .orgchart .middle-level .content { border-color: #006699; }
	    .orgchart .product-dept .title { background-color: #009933; }
	    .orgchart .product-dept .content { border-color: #009933; }
	    .orgchart .rd-dept .title { background-color: #993366; }
	    .orgchart .rd-dept .content { border-color: #993366; }
	    .orgchart .pipeline1 .title { background-color: #996633; }
	    .orgchart .pipeline1 .content { border-color: #996633; }
	    .orgchart .frontend1 .title { background-color: #cc0066; }
	    .orgchart .frontend1 .content { border-color: #cc0066; } 	   	
    	.orgchart { background: white; }		         	
	</style>	  
{% endblock %}
{% block page-content %}
        <div class="clearfix"></div>
		<div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>Redis列表 <small>Redis Assets List</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                        <div class="product_price">            
		                    <table id="DatabaseListTable" class="table table-striped table-bordered">
		                      <thead>
		                        <tr>
					                <th class="text-center">详细</th>
					                <th>ID</th>
					                <th>环境类型</th>
					                <th>架构类型</th>
					                <th>业务归属</th>
					                <th>版本</th>
					                <th>数据库地址</th>
					                <th>端口</th>
									<th>标签</th>
									<th class="text-center">操作</th>
		                        </tr>
		                      </thead>
		                      <tbody>
		                      </tbody>
		                    </table>                          
                        </div> 
                   </div>
                </div>		
			  </div>
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>Redis配置 <small>Redis Config</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                  	<!--<div class="" role="tabpanel" data-example-id="togglable-tabs"  id="add_inventory" style="display:none;">-->
                    <div class="" role="tabpanel" data-example-id="togglable-tabs"  id="add_inventory">
                      <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#tab_content1" id="#database" role="tab" data-toggle="tab" aria-expanded="true"><i class="fa fa-cubes"></i> Database</a>
                        </li>
                        <li role="presentation" class=""><a href="#tab_content4" role="tab" id="#allot" data-toggle="tab" aria-expanded="false"><i class="fa fa-cogs"></i> DB分配</a>
                        </li>                                                                       
                      </ul>
                      <div id="myTabContent" class="tab-content">
                        <div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="#database">
							<div class="col-md-6 col-xs-12">
								<legend>
									<i class="fa  fa-paper-plane"></i> 配置数据库
								</legend>
								<form role="form" method="post" id="addDatabase" class="main form-horizontal"  novalidate>							
									<div class="form-group" >
										 <label class="col-sm-2 control-label" >环境类型<span class="required">*</span></label>
										 <div class="col-sm-10">
											 <select required="required" class="selectpicker form-control" data-live-search="true"  data-size="10" data-width="100%" name="db_env" id="db_env" autocomplete="off">
									   			<option value="beta" name="db_env" >测试</option>
												<option value="ga" name="db_env">生产</option>			
											 </select>
										 </div>						 	
									</div>									
									<div class="form-group" >
										 <label class="col-sm-2 control-label" >架构类型<span class="required">*</span></label> 
										 <div class="col-sm-10">
										     <select required="required" class="selectpicker form-control" data-live-search="true"  data-size="10" data-width="100%" name="db_mode" id="db_mode" autocomplete="off">
										   		<option value="single">单例</option>
												<option value="slave">从库</option>
												<option value="cluster">集群</option>	
												<option value="master">主库</option>			
											 </select>	
										 </div>					 	
									</div>
									<input class="form-control"  type="hidden" value="mysql"  name="db_type" />				
									<div class="form-group">
										 <label class="col-sm-2 control-label" > 所属项目<span class="required">*</span></label>
										 <div class="col-sm-10">
											  <select required="required" class="selectpicker form-control" data-live-search="true"  data-size="10" data-width="100%"  id="db_business"  onchange="javascript:oBtBusinessSelect();" autocomplete="off">
											   		<option selected="selected" value="">请选择一个项目</option>							   							
											  </select>
										 </div>
									</div>									
									<div class="form-group" >
										 <label required="required" class="col-sm-2 control-label" >数据库IP<span class="required">*</span></label>
										 <div class="col-sm-10">
											 <select class="selectpicker form-control" data-live-search="true"  data-size="10" data-width="100%" name="db_assets_id" id="db_assets_id" autocomplete="off">
											   	<option selected="selected" value="">请选择服务器</option>						   							
											 </select>	
										 </div>					 	
									</div>
									<div class="form-group">
										 <label class="col-sm-2 control-label" > 读写类型<span class="required">*</span></label>
										 <div class="col-sm-10">
											 <select class="selectpicker form-control" data-live-search="true"  data-size="10" data-width="100%" name="db_rw"  id="db_rw" autocomplete="off">
											   	<option selected="selected" value="read">只读</option>
												<option  value="write">写入</option>		
												<option  value="r/w">读写</option>						   		
											 </select>
										 </div>
									</div>																								
									<div class="item form-group" >
										 <label  class="col-sm-2 control-label" > 数据库版本<span class="required">*</span></label>
										 <div class="col-sm-10">
										 	<input class="form-control" type="text" value="" placeholder="不能为空" name="db_name" id="db_version"  required/>
										 </div>
									</div>												
									<div class="item form-group" >
										 <label  class="col-sm-2 control-label" > 端口<span class="required">*</span></label>		
										 <div class="col-sm-10">								 
										 	<input class="form-control" type="text"   value="" placeholder="不能为空" name="db_port" id="db_port" required/>
										 </div>
									</div>				
																		
									<div class="item form-group" >
										 <label  class="col-sm-2 control-label" > 密码<span class="required">*</span></label>
										 <div class="col-sm-10">
										 	<input class="form-control" type="password"   value="" placeholder="不能为空" name="db_passwd" id="db_passwd" required/>
										 </div>
									</div>	
									<div class="form-group" >
										 <label  class="col-sm-2 control-label" > 备注</label>	
										 <div class="col-sm-10">									 
										 	<input class="form-control" type="text"  value="" placeholder="第二个分库" name="db_mark" id="db_mark" />
										 </div>										 
									</div>		
									<legend></legend>																											
									<div class="form-group">
										<label class="col-sm-4 control-label"></label> 								
										<button type="reset" class="btn btn-default btn-group-sm">取消</button>
										<button type="button" class="btn btn-default btn-group-sm" value="" id="save_database_config">添加</button>
							 		</div>	
								</form> 
							</div>
							<div class="hr hr32 hr-dotted"></div>
							<div class="col-md-6 col-xs-12">
								<legend>
									<i class="fa  fa-paper-plane"></i> 架构拓扑
								</legend>							
								<div class="" id="chart-container" style="height:600px;overflow:auto; "></div>
							</div>
						</div>
                        <div role="tabpanel" class="tab-pane fade" id="tab_content4" aria-labelledby="#allot">
							<div class="col-lg-4">
								<legend>
									<i class="fa  fa-paper-plane"></i> Database
								</legend>
								<form role="form" method="post" id="add_user_db">
									<div class="form-group" >
										 	<label > 用户<i class="fa fa-info-circle" data-toggle="tooltip" title="选择用户"></i></label>
											<select required="required" class="selectpicker form-control" data-live-search="true"  data-size="10" data-width="100%" name="user" id="user"  autocomplete="off">
											   	<option selected="selected" value="">请选择一个用户</option>							   							
											</select>												
									</div>										
									<div class="form-group" >
										 <label> 数据库服务器<i class="fa fa-info-circle" data-toggle="tooltip" title="选择数据库服务器"></i></label>
										 <select required="required" class="selectpicker form-control" data-live-search="true" name="db_server" id="db_server"  data-size="10" data-selected-text-format="count > 3"  data-width="100%"   autocomplete="off">
										   	<option >请选择一个数据库服务器</option>							   							
										 </select>											
									</div>									
									<div class="form-group" >
										 <label> 数据库名<i class="fa fa-info-circle" data-toggle="tooltip" title="选择数据库名"></i></label>
										 <select multiple required="required" class="selectpicker form-control" data-live-search="true" name="db_server_db" id="db_server_db"  data-size="10" data-selected-text-format="count > 3"  data-width="100%"    autocomplete="off">
										   	<option >请选择一个数据库</option>							   							
										 </select>											
									</div>		
									<div class="form-group" >
										 <label> 是否可写<i class="fa fa-info-circle" data-toggle="tooltip" title="默认只有只读权限"></i></label>
										 <select required="required" class="selectpicker form-control"  name="is_write" id="is_write" autocomplete="off">
										 	<option value="0">拒绝</option>
										   	<option value="1">允许</option>								   							
										 </select>											
									</div>																		
									<div class="form-group" >
										 <label> 过期日期<i class="fa fa-info-circle" data-toggle="tooltip" title="权限过期日期"></i></label>
										 <select  required="required" class="selectpicker form-control" data-live-search="true" name="valid_date" id="valid_date"   autocomplete="off">
										 	<option value="36500">永久</option>
										   	<option value="1">一天</option>	
										   	<option value="7">七天</option>
										   	<option value="30">三十天</option>		
										   	<option value="365">一年</option>		   							
										 </select>											
									</div>																																																							
									<lable><button type="button" value="" class="btn btn-default" id="add_user_db_btn" disabled>保存</button></lable>
									<lable><button type="button" value="" class="btn btn-default" id="modf_user_db_btn" value="" style="display:none;">修改</button></lable>
									<button type="reset" class="btn btn-default">撤销</button>
								</form>
							 </div>
							 <div class="col-lg-8">
								<legend>
									<i class="fa  fa-paper-plane-o"></i> 用户数据库列表
								</legend>
								<table  class="table table-striped table-bordered" id="user_database_list">						
		                                <thead>
												<tr>
													<th>用户</th>														
													<th>数据库</th>	
													<th>数据库地址</th>		
													<th>端口</th>		
													<th>备注</th>	
													<th>读写类型</th>	
													<th>权限过期</th>	
													<th>写入权限</th>	
													<th class="text-center">操作</th>
												</tr>											    
		                                </thead>
		                                <tbody>
		                                </tbody>
		                       	</table>															 	
							 </div>							 
                        </div>                                                 
                    </div>                                  
                  </div>
                </div>
              </div>
              
        <div  class="modal fade bs-example-modal-user-table" data-backdrop="static"  tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myUserTablesModalLabel">用户权限</h4>
              </div>
              <div class="modal-body ue-container">
              
				 <select multiple="multiple" size="10" name="user-table-list" class="demo"> </select>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="userTableListSubmit"  class="btn btn-primary">保存</button>
              </div>

            </div>
          </div>
        </div>

        <div  class="modal fade bs-example-modal-user-sql" data-backdrop="static"  tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myUserDatabaseSqlModalLabel">数据库命令类型</h4>
              </div>
              <div class="modal-body ue-container">
              
				 <select multiple="multiple" size="10" name="user-sql-list" class="demo"> </select>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="userDatabaseSqlListSubmit"  class="btn btn-primary">保存</button>
              </div>

            </div>
          </div>
        </div>

        <div  class="modal fade bs-example-modal-user-grant" data-backdrop="static"  tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myUserGrantsModalLabel">用户权限</h4>
              </div>
              <div class="modal-body ue-container">
              
				 <select multiple="multiple" size="10" name="user-grants-list" class="demo"> </select>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="userGrantsListSubmit"  class="btn btn-primary">保存</button>
              </div>

            </div>
          </div>
        </div>
         
        <div  class="modal fade bs-example-modal-database-import" data-backdrop="static"  tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="databaseImportModalLabel">导入数据库</h4>
              </div>
              <div class="modal-body ue-container">
					<div class="form-group">
					    <div class="input-group col-xs-12">
					        <div class="input-group-btn">
					            <button type="button" class="btn btn-default" data-dismiss="modal" disabled>数据库名称</button>
					        </div>
					        <input id="server_database_input" type="text" class="form-control" placeholder="点击同步数据信息">
							<span class="input-group-btn">
							    <button class="btn btn-success" id="server_database_submit" value="">同步</button>
							</span>					        
					    </div>
					</div>              
					<table width="100%" class="table table-striped table-bordered" id="server_database_list">						
                               <thead>
									<tr>
										<th>名称</th>
										<th>key数量(个)</th>		
										<th>过期KEY(个)</th>	
										<th class="text-center">操作</th>
									</tr>											    
                               </thead>
                               <tbody>
                               </tbody>
                      </table>				 

              </div>
              <div class="modal-footer">
              </div>

            </div>
          </div>
        </div>         
              
        </div>                 
{% endblock %}
{% block js-content %}
	<script src="/static/jquery-confirm/jquery-confirm.min.js"></script>
    <script src="/static/datatable/datatables.net/js/jquery.dataTables.min.js"></script>
	<script src="/static/datatable/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>	
    <script src="/static/datatable/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons/js/buttons.print.min.js"></script>	
    <script src="/static/js/doublebox/doublebox-bootstrap.js"></script>
    <script src="/static/js/dragable/dragable.js"></script> 
	<script src="/static/js/database/redis/db.js"></script>
	<script src="/static/validator/validator.js"></script>
	<script type="text/javascript" src="/static/js/orgchart/jquery.orgchart.js"></script>
{% endblock %}